// 排序分类组件
import classNames from 'classnames';

// 要保证传入函数的参数是一个对象
export const Tabs = ({ tabs, active, changeTab }) => {
  // 没有定义自己组件的状态

  return (
    // 排序tab
    <div className="tabs-order">
      {/* 显示的数据都是父组件传递过来的 */}
      {tabs.map((item) => {
        return (
          <div
            key={item.id}
            className={classNames({ on: item.type === active })}
            onClick={() => changeTab(item.type)}
          >
            {item.name}
          </div>
        );
      })}
    </div>
  );
};

// export class Tabs extends Component {
//   // 没有定义自己组件的状态
//   render() {
//     return (
//       // 排序tab
//       <div className="tabs-order">
//         {/* 显示的数据都是父组件传递过来的 */}
//         {this.props.tabs.map((item) => {
//           return (
//             <div
//               key={item.id}
//               className={classNames({ on: item.type === this.props.active })}
//               onClick={() => this.props.changeTab(item.type)}
//             >
//               {item.name}
//             </div>
//           );
//         })}
//       </div>
//     );
//   }
// }

export default Tabs;
